import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false


// 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)
import VueRouter from 'vue-router'
// 给Vue安装路由（给vue对象提供路由支持）
Vue.use(VueRouter)


// 1. 定义 (路由) 组件。
// 导入路由要显示的组件
// 注意：以后路由对应的组件一般都是放到 `src/views`文件夹里
import discover from './views/discover'
import my from './views/my'
import friends from './views/friends'
import notFound from './views/notFound'
import movie from './views/movie'


// 导入二级路由对应的两个组件
import topList from './views/topList'
import songList from './views/songList'


// 2. 设置路由规则
// 就是在设置什么路径对应什么组件
const routes = [

  // 空字符串就代表什么路径都没输入时，自动跳转到 `/discover`
  { path: '', redirect: '/discover'},
  // 重定向：访问/d路径会自动跳转到/discover
  { path: '/d', redirect: '/discover'},

  // path这里就是路径
  // component这里就是对应的组件
  // children就是写子路由的地方，里面写子路由的规则
  { 
    path: '/discover', 
    component: discover, 
    // 子路由的路径一般可以不加/
    // 不加/就代表需要先拼接父路由的路径再加自己的路径
    // 如果加了/那么它还是二级路由，只不过地址上就不能拼接父路由路径了
    children: [
      { path: 'topList', component: topList },
      { path: 'songList', component: songList },
    ]
  },
  { path: '/my', component: my },
  { path: '/friends', component: friends },

  // 这里的:id就代表需要路径上在movie后面添加一个id参数
  // 代表访问这个路由时，必须携带id作为参数，不携带就访问不了
  // props:true 代表开启使用props接收参数
  { path: '/movie/:id', component: movie, props: true },

  // 一般情况下404页面都是放在最后
  // *代表除了上面以外的其他路径，就访问notFound组件
  { path: '*', component: notFound },
]

// 3. 创建 router 实例，然后传入写好的匹配规则
const router = new VueRouter({
  routes, // (缩写) 相当于 routes: routes
  // mode: 'history'
})

// 路由就准备完成
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')
